<%@page import="java.sql.Timestamp"%>
<%@page import="cz.acies.genea.data.persist.GedPerson"%>
<%@page import="org.apache.commons.lang3.time.DateFormatUtils"%>
<%@page import="cz.acies.genea.data.dao.GedPersonDAO"%>
<%@page import="com.google.gson.Gson"%>
<%@page import="cz.acies.data.persist.TreeNode"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
String theme = "metro";

Gson gson = new Gson();
String data = "";
try {
	GedPersonDAO dao = new GedPersonDAO();
	List<GedPerson> records = dao.selectAll();
	List<Map<String, String>> list = new ArrayList<Map<String, String>>();
	for (GedPerson record : records) {
		Map<String, String> row = new LinkedHashMap<String, String>();
		row.put("id", "" + record.getId());
		row.put("displayName", "" + record.getDisplayName());
		String dt = DateFormatUtils.format(record.hasBirthDate() ? record.getBirthDate() : Timestamp.valueOf("2099-01-01 00:00:00"), "dd.MM.yyyy");
		dt = (dt.equals("01.01.2099")) ? "" : dt;
		row.put("birthday", "" + dt);
		//System.out.println(row);
		list.add(row);
	}
	data = "" + gson.toJsonTree(list);
	//System.out.println(""+data);
} catch (Exception exc) {
	exc.printStackTrace();
}
%>
<!DOCTYPE html">
<html>
<head>
<base href="<%=basePath%>">
<title></title>
<link rel="stylesheet" type="text/css"
	href="<%=path%>/libs/themes/<%=theme%>/easyui.css">
<link rel="stylesheet" type="text/css"
	href="<%=path%>/libs/themes/icon.css">
<style type="text/css">
body {
	font-family: sans-serif, Helvetica, Verdana;
	font-size: 11px;
	margin: 0px;
}

label { /*font-family: sans-serif, Helvetica, Verdana;*/
	font-size: 11px;
}
</style>
<script type="text/javascript" src="<%=path%>/libs/jquery-1.9.1.js"></script>
<script type="text/javascript" src="<%=path%>/libs/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path%>/libs/aciea.utils.js"></script>
<script type="text/javascript">
$(document.body).ready(function() {});

function doAppned() {
	//alert("doAppned");
	var dlg = $(
		"<div id=\"appendDialog\" class=\"easyui-dialog\"></div>"
	);
	var url = "/genea/pages/person_edit.jsp?processId=doAppend&recordId=";
	var content = "<iframe scrolling=\"auto\" frameborder=\"0\" src=\"" + url + "\" style=\"width:100%;height:100%;\"></iframe>";
	dlg.dialog({
		title: "Oprava",
		width: 650,  
		height: 600,  
		closed: false,  
		cache: false,
		resizable: false,
		shadow: false,
		href: "/genea/pages/person_edit.jsp?processId=doAppend&recordId=",
		buttons:[{
			text:"Zapsat",
			handler:function(){
				$("#person_EditForm").form("submit", {
					url: "/genea/pages/person_process.jsp?processId=doAppend",
					onSubmit: function(){},
					success:function(data){
						var result = $.parseJSON(data);
						$("#modulList").datagrid({ "data": result });
						dlg.dialog("close");
						dlg.dialog("destroy");
					}
				});
			}
		},{
			text: "Zavřít",
			handler: function(){ 
				dlg.dialog("close"); 
				dlg.dialog("destroy");
			}
		}],
		modal: true
	});
	$("#appendDialog").dialog("refresh", ""+url);
};

function doUpdate(rowIndex, rowData) {
	var dlg = $(
		"<div id=\"appendDialog\" class=\"easyui-dialog\"></div>"
	);
	var url = "/genea/pages/person_edit.jsp?processId=doUpdate&recordId="+rowData.id;
	var content = "<iframe scrolling=\"auto\" frameborder=\"0\" src=\"" + url + "\" style=\"width:100%;height:100%;\"></iframe>";
	dlg.dialog({
		title: "Oprava",
		width: 650,  
		height: 600,  
		closed: false,  
		cache: false,
		resizable: false,
		shadow: false,
		href: "/genea/pages/person_edit.jsp?recordId="+rowData.id,
		//content: ""+content,
		buttons:[{
			text:"Zapsat",
			handler:function(){
				$("#person_EditForm").form("submit", {
					url: "/genea/pages/person_process.jsp?processId=doUpdate",
					onSubmit: function(){},
					success:function(data){
						var result = $.parseJSON(data);
						$("#modulList").datagrid({ "data": result });
						dlg.dialog("close");
						dlg.dialog("destroy");
					}
				});
			}
		},{
			text: "Zavřít",
			handler: function(){ 
				dlg.dialog("close"); 
				dlg.dialog("destroy");
			}
		}],
		modal: true
	});
	$("#appendDialog").dialog("refresh", ""+url);
};
function doDelete() {
	alert("doDelete");
};

function doSelectRow(rowIndex, rowData) {
	$("#personId").val(""+rowData.id);
	var url = "/genea/pages/person_ajax.jsp";
	$("#fatherPanel").panel("refresh", url+"?processId=reloadDetail&sourceId=fatherPanel&recordId="+rowData.id);
	$("#motherPanel").panel("refresh", url+"?processId=reloadDetail&sourceId=motherPanel&recordId="+rowData.id);
	$("#personPanel").panel("refresh", url+"?processId=reloadDetail&sourceId=personPanel&recordId="+rowData.id);
	
	var params = { processId: "reloadChildren", recordId: rowData.id };
	var result = executeAjaxSync(url, params);
	var data = $.parseJSON(result);
	$("#childrenList").datagrid("loadData", data);
    
	params = { processId: "reloadPartners", recordId: rowData.id };
	result = executeAjaxSync(url, params);
	data = $.parseJSON(result);
	$("#partnersList").datagrid("loadData", data);	                        
};

</script>
</head>
<body>
	<input id="recordId" type="hidden" value="">
	<div id="project_MainPanel" class="easyui-layout">
		<div id="project_ListPanel" data-options="region:'west',border:false" style="width:320px;">
			<div id="person_ListTabs" title="Seznam" data-options="border:false">
				<div id="project_TabList" title="Seznam" >
					<div id="person_ModulListTB" style="padding:5px;height:30px;display:inline;">
						<a id="newBtn" href="javascript:doAppned();" class="easyui-linkbutton"></a>
						<script type="text/javascript">
						$("#newBtn").linkbutton({
							iconCls : "icon-new",
							text : "Nový",
							plain : true
						});
						</script>
						<a id="deleteBtn" href="javascript:doDelete();" class="easyui-linkbutton"></a>
						<script type="text/javascript">
						$("#deleteBtn").linkbutton({
							iconCls : "icon-delete",
							text : "Smazat",
							plain : true
						});
						</script>
					</div>
					<table id="person_ModulList" class="easyui-datagrid" style="border-top: 1px solid #000"></table>
					<script type="text/javascript">
					$("#person_ModulList").datagrid({
						singleSelect : true,
						collapsible : true,
						border : false,
						columns : [ [ {
							field : "displayName",
							width : 200,
							title : "Osoba"
						}, {
							field : "birthday",
							width : 100,
							title : "Datum nar."
						} ] ],
						data : <%=data%>,
						toolbar : "#person_ModulListTB",
						fit : true,
						onDblClickRow : function(rowIndex, rowData) {
							doUpdate(rowIndex, rowData);
						},
						onSelect : function(rowIndex, rowData) {
							doSelectRow(rowIndex, rowData);
						}
					});
					</script>
				</div>
				<div id="project_TabTree" title="Strom" ></div>
			</div>
		</div>
		<script type="text/javascript">
		$("#person_ListTabs").tabs({
			tabPosition : "bottom",
			headerWidth : 100,
			boder: false,
			fit : true
		});
		</script>
		<div id="centerPanel" data-options="region:'center', border:false"
			style="padding:0px;">
			<table>
				<tr>
					<td>
						<div id="fatherPanel" class="easyui-panel" style="height:150px; text-align: left; padding: 15px;"></div>
						<script type="text/javascript"></script>
					</td>
					<td>
						<div id="motherPanel" class="easyui-panel" style="height:150px; padding: 15px;"></div>
						<script type="text/javascript"></script>
					</td>
				</tr>
				<tr>
					<td colspan="2"> 
						<div id="personPanel" class="easyui-panel" style="height:150px; padding: 15px;"></div>
						<script type="text/javascript"></script>
					</td>
				</tr>
				<tr>
					<td>
						<div id="partnersPanel" class="easyui-panel" style="height:250px; padding: 0px;">
							<table id="partnersList" class="easyui-datagrid"></table>
						</div>
						<script type="text/javascript">
						$("#partnersList").datagrid({
							singleSelect : true,
							columns : [[{
								field : "displayName",
								width : 200,
								title : "Osoba"
							}, {
								field : "birthday",
								width : 100,
								title : "Datum nar."
							}]],
							data : [],
							border: false
						});
						</script>
					</td>
					<td>
						<div id="childrenPanel" class="easyui-panel" style="height:250px; text-align: right;">
							<table id="childrenList" class="easyui-datagrid"></table>
						</div>
						<script type="text/javascript">
						$("#childrenList").datagrid({
							singleSelect : true,
							columns : [[{
								field : "displayName",
								width : 200,
								title : "Osoba"
							}, {
								field : "birthday",
								width : 100,
								title : "Datum nar."
							}]],
							data : [],
							border: false
						});
						</script>
					</td>
				</tr>

				<tr>
					<td colspan="2"></td>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			
		</script>
	</div>
	<script type="text/javascript">
		$("#project_MainPanel").layout({
			fit : true
		});
	</script>
</body>
<script type="text/javascript">
	$(function() {
		var w = $("#centerPanel").width();
		var h = $("#centerPanel").height();
		$("#fatherPanel").width((w / 2) - 42);
		$("#motherPanel").width((w / 2) - 42);
		$("#personPanel").width(w - 50);
		$("#partnersPanel").panel({
			tools:[{
				iconCls: "icon-new",
				handler:function() { alert("Partner New"); }
			},{
				iconCls: "icon-add",
				handler:function() { alert("Partner Add"); }
			},{
				iconCls: "icon-delete",
				handler: function() { alert("Partner Delete"); }
		    }],
			title: "Partneři" 
		});
		$("#partnersPanel").width((w / 2) - 12);
		$("#partnersList").datagrid({ fit : true });
		$("#childrenPanel").width((w / 2) - 12);
		$("#childrenPanel").panel({
			tools:[{
				iconCls: "icon-new",
				handler:function() { alert("Child New"); }
			},{
				iconCls: "icon-add",
				handler: function() { alert("Child Add"); }
			},{
				iconCls: "icon-delete",
				handler: function() { alert("Child Delete"); }
		    }],
			title: "Děti" 
		});
		$("#childrenList").datagrid({ fit : true });
		$("#personPanel").height(h - ($("#fatherPanel").height() + $("#childrenPanel").height() + 130));
		
		var url = "/genea/pages/person_ajax.jsp?processId=reloadDetail&sourceId=fatherPanel&recordId=";
		$("#fatherPanel").panel("refresh", url);
		var url = "/genea/pages/person_ajax.jsp?processId=reloadDetail&sourceId=motherPanel&recordId=";
		$("#motherPanel").panel("refresh", url);
		var url = "/genea/pages/person_ajax.jsp?processId=reloadDetail&sourceId=personPanel&recordId=";
		$("#personPanel").panel("refresh", url);
	});
</script>
</html>
